<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" @open="open">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="auto"
      v-loading="formLoading"
    >
      <el-row :span="24">
        <el-col :span="12">
          <el-form-item label="资源名称:" prop="sourceData.sourceName">
            {{ formData.sourceData.sourceName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源编号:" prop="sourceData.sourceCode">
            {{ formData.sourceData.sourceCode }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源类型:" prop="sourceData.sourceType">
            <dict-tag :type="DICT_TYPE.SOURCE_TYPE" :value="formData.sourceData.sourceType" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="来源信息:" prop="sourceData.sourceDesc">
            <dict-tag :type="DICT_TYPE.SOURCE_DESC" :value="formData.sourceData.sourceType" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文件类型:" prop="sourceData.fileType">
            {{ formData.sourceData.fileType }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文件大小:" prop="sourceData.fileSize">
            <!-- {{ formData.sourceData.fileSize }}B -->
            {{ fileSizeFormatter('', '', formData.sourceData.fileSize) }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源封面:" prop="sourceData.mainImage">
            <el-image
              style="width: 44px; height: 44px;"
              :src="formData.sourceData.mainImage"
              :preview-src-list="[formData.sourceData.mainImage]"
              fit="cover"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源文件:" prop="sourceData.file">
            <UploadFile
              v-model="formData.sourceData.file"
              :limit="1"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">创作者信息</el-divider>
      <el-row :span="24">
        <el-col :span="12">
          <el-form-item label="作者名称:" prop="authorName">
            {{ formData.authorName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="其它贡献者:" prop="contributeName">
            {{ formData.contributeName }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="生平简介:" prop="authorDesc">
            <span v-html="formData.authorDesc"></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">内容描述</el-divider>
      <el-row :span="24">
        <el-col :span="12">
          <el-form-item label="资源标签:" prop="catalogTags">
            <DictCataTag :value="formData.catalogTags" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主题分类:" prop="catalogClassify">
            <dict-tag :type="DICT_TYPE.JOURNAL_TYPE" :value="formData.catalogClassify" /> 
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="资源描述:" prop="catalogDesc">
            <span v-html="formData.catalogDesc"></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">关联信息</el-divider>
      <el-row :span="24">
        <el-col :span="12">
          <el-form-item label="存放位置:" prop="catalogStore">
            {{ formData.catalogStore }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="网络连接:" prop="webUrl">
            {{ formData.webUrl }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参考书目:" prop="attach">
            {{ formData.attach }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <!-- <el-button
        type="primary"
        :disabled="!data.processInstanceId"
        @click="handleBpm"
      >流程图</el-button> -->
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { propTypes } from '@/utils/propTypes'
import { fileSizeFormatter } from '@/utils'
import { SourceApi, SourceVO } from '@/api/dr/source'
import { SourceCataApi, SourceCataVO } from '@/api/dr/sourcecata'

defineOptions({ name: 'SourceSearchDetail' })
const router = useRouter() // 路由
const emit = defineEmits(['update:visible'])
const props = defineProps({
  visible: propTypes.bool.def(false),
  data: propTypes.object.def({}),
})
// 弹窗的是否展示
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => {
    emit('update:visible', val)
  },
})
// 弹窗的标题
const dialogTitle = ref('资源检索查看')
const formLoading = ref(false)
const	formData = ref<SourceCataVO | any>({
  sourceData: {},
})
// 流程图
const handleBpm = () => {
  router.push({
    name: 'BpmProcessInstanceDetail',
    query: {
      id: props.data.processInstanceId
    }
  })
}
const getDetail = async() => {
  formLoading.value = true
  try {
    const data = await SourceCataApi.getDetail(props.data.id)
    formData.value = { ...data, sourceData: {} }
    if(formData.value.sourceId) {
      const sourceData = await SourceApi.getSource(formData.value.sourceId) || {}
      formData.value.sourceData = sourceData
    }
  } finally {
    formLoading.value = false
  }
}
const getOptions = () => {
 
}
const open = () => {
  getDetail()
  getOptions()
}
</script>

<style lang="scss" scoped>
</style>
